<template>
  <a-table :columns="tableColumn" :pagination="false" :data-source="tableData" bordered>
    <template #operate="{record}">
      <a-button type="link" @click="editCard(record)">{{ $t('编辑银行卡') }}</a-button>
    </template>
  </a-table>
  <a-modal v-model:visible="visibleCard" :title="$t('编辑银行卡')" @ok="cardConfirm" @cancel="closeForm">
    <a-form :model="cardForm" :rules="rulesForm" ref="formRef">
      <a-form-item :label="$t('银行卡号')" name="banckNum">
        <span style="padding:0 5px">{{ cardState.startNum }}</span>
        <a-input style="width:120px" v-model:value="cardState.centerNum"/>
        <span style="padding:0 5px">{{ cardState.endNum }}</span>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {onMounted, reactive, ref} from "vue";
import locale from "@/locale";
import {updateBankCard, getOrderDetailsUserBank} from "@/api/order"
import {useRoute} from "vue-router"

const {t} = locale.global;
const tableColumn = [
  {title: t('账户名称'), dataIndex: 'userName', align: 'center'},
  {title: t('身份证号'), dataIndex: 'userIdcard', align: 'center'},
  {title: t('银行名称'), dataIndex: 'banck', align: 'center'},
  {title: t('银行卡号'), dataIndex: 'banckNum', align: 'center'},
  // {title: t('操作'), align: 'center', slots: {customRender: 'operate',}},
]
import {message} from "ant-design-vue"

export default {
  name: "index",
  setup() {
    const tableData = ref([])
    const route = useRoute()
    const formRef = ref(null)
    const cardForm = ref({})
    const rulesForm = {
      banckNum: {
        required: true, trigger: 'blur', validator: (rule, value) => {
          if (!value) {
            return Promise.reject(t('不能为空'))
          }
          if (value && (value.length !== 16 && value.length !== 18)) {
            return Promise.reject(t('银行卡号格式错误'))
          }
          return Promise.resolve()
        }
      },
    }
    const visibleCard = ref(false)
    const cardState = reactive({
      startNum: null,
      centerNum: null,
      endNum: null,
    })

    async function getBankInfo() {
      const {userId} = route.query
      const res = await getOrderDetailsUserBank({userId})
      if (res.code === 1) {
        if (res.data) {
          tableData.value = [res.data]
        }
      }
    }

    function editCard(record) {
      cardForm.value = {...record}
      cardState.startNum = record.banckNum.substring(0, 3)
      cardState.endNum = record.banckNum.substring(record.banckNum.length - 4, record.banckNum.length)
      cardState.centerNum = record.banckNum.substring(3, record.banckNum.length - 4)
      visibleCard.value = true
    }

    async function cardConfirm() {
      formRef.value.validate().then(async (v) => {
        const {startNum, centerNum, endNum} = cardState
        const num = startNum + centerNum + endNum
        console.log(num.length)
        if ((cardForm.value.banck === 'STP' && num.length !== 18) || (cardForm.value.banck !== 'STP' && num.length !== 16)) {
          return message.error(t('格式错误'))
        }
        const res = await updateBankCard({
          ...cardForm.value,
          banckNum: num
        })
        if (res.code === 1) {
          visibleCard.value = false
          message.success(t('操作成功'))
          getBankInfo()
        }
      })
    }

    function closeForm() {
      formRef.value.resetFields()
    }

    onMounted(() => {
      getBankInfo()
    })
    return {
      cardState,
      cardConfirm,
      visibleCard,
      editCard,
      cardForm,
      formRef,
      closeForm,
      rulesForm,
      tableColumn,
      tableData
    }
  }
}
</script>

<style scoped>

</style>
